<template>
  <div class="commonts_item">
    <div class="comt_head flex">
      <img :src="itemComment.headimgurl" alt="">
      <span class="nickname">{{ itemComment.nickname }}</span>
      <div class="stars">
        <div>
          <b :style="{width: (5 - itemComment.dp_score) / 5  * 100 + '%'}" ></b>
          <img src="@/assets/stars.png" alt="">
        </div>
      </div>
    </div>
    <p class="comt_txt">{{ itemComment.content }}</p>
    <p class="comt_time">{{ itemComment.time | dataFormat }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["itemComment"],
  filters: {
    dataFormat(data) {
      var dateArr = data
        .toString()
        .split(" ")[0]
        .split("-");
      var timeArr = data
        .toString()
        .split(" ")[1]
        .split(":");
      data =
        dateArr[0] +
        "年" +
        dateArr[1] +
        "月" +
        dateArr[2] +
        "日 " +
        timeArr[0] +
        ":" +
        timeArr[1];
      return data;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.commonts_item {
  padding-top: to(15);
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  .comt_head {
    height: to(60);
    img {
      height: 100%;
      vertical-align: bottom;
      border-radius: 50%;
    }
    span {
      font-size: to(26);
      color: #707070;
      line-height: to(60);
      margin-left: to(18);
    }
    .stars {
      float: right;
      height: 100%;
      color: #aa0000;
      position: relative;
      margin-left: to(300);
      div {
        background-color: #aa0000;
        margin-top: to(20);
        overflow: hidden;
        position: relative;
        img {
          width: to(120);
          display: block;
          border-radius: 0;
          position: relative;
          z-index: 1;
        }
        b {
          position: absolute;
          height: 100%;
          background-color: #ccc;
          z-index: 0;
          right: 0;
          top: 0;
          font-size: to(34);
          line-height: to(52);
          overflow: hidden;
        }
      }
    }
  }
  .comt_txt {
    margin-top: to(15);
    font-size: to(23);
    line-height: to(100);
  }
  .comt_time {
    width: 100%;
    font-size: to(24);
    text-align: right;
    color: #707070;
    margin-bottom: to(15);
  }
}
</style>
